<template>
  <div id="personal">
    <div class="self-info center">
      <!-- sidebar -->
      <div class="lfnav fl">
        <div class="nav_title">个人中心</div>
        <div class="title_list">
          <ul>
            <li> <router-link to="/mall/personal">个人信息</router-link></li>

            <li><router-link to="/mall/myorder">我的订单</router-link></li>

            <li> <router-link to="mall/body" @click="logout">退出登录</router-link></li>
          </ul>
        </div>
      </div>

      <div class="intro fr">
        <div class="uc-box uc-main-box">
          <div class="uc-content-box order-view-box">
            <div class="box-hd">
              <h1 class="title">填写并核对订单信息</h1>
              <div class="more clearfix">
                <div class="actions">
                  <a class="btn btn-small btn-primary" title="提交订单" @click="submitOrder">提交订单</a>
                </div>
              </div>
            </div>
            <div class="box-bd">
              <div class="uc-order-item uc-order-item-pay">
                <div class="order-detail">
                  <div class="order-summary">
                    <div class="order-progress">
                      <el-steps :active="0" finish-status="success" simple style="margin-top: 2px">
                        <el-step title="下单" />
                        <el-step title="付款" />
                        <el-step title="配货" />
                        <el-step title="出库" />
                        <el-step title="交易成功" />
                      </el-steps>
                    </div>
                  </div>
                  <table class="order-items-table">
                    <tbody>
                      <tr>
                        <td class="col col-thumb">
                          <div class="figure figure-thumb">
                            <a target="_blank">
                              <img :src="goods.goodsDetail.goodsCoverImg" width="80" height="80" alt="">
                            </a>
                          </div>
                        </td>
                        <td class="col col-name">
                          <p class="name">
                            {{ goods.goodsDetail.goodsName }}
                          </p>
                        </td>
                        <td class="col col-price">
                          <p class="price">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ goods.goodsDetail.sellingPrice }}元 x 1
                          </p>
                        </td>
                        <td class="col col-actions">
                        </td>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div id="editAddr" class="order-detail-info">
                  <h3>收货信息</h3>
                  <table class="info-table">
                    <tbody>
                      <tr>
                        <th>收货地址：</th>
                        <td class="user_address_label">{{ goods.userInfo.address }}</td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="actions">
                    <a class="btn btn-small btn-line-gray J_editAddr" @click="show()">修改</a>
                  </div>
                </div>
                <div id="editTime" class="order-detail-info">
                  <h3>支付方式</h3>
                  <table class="info-table">
                    <tbody>
                      <tr>
                        <th>支付方式：</th>
                        <td>在线支付</td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="actions">
                  </div>
                </div>
                <div class="order-detail-total">
                  <table class="total-table">
                    <tbody>
                      <tr>
                        <th>商品总价：</th>
                        <td><span class="num">{{ goods.goodsDetail.sellingPrice }}.00</span>元</td>
                      </tr>
                      <tr>
                        <th>运费：</th>
                        <td><span class="num">0</span>元</td>
                      </tr>
                      <tr>
                        <th class="total">应付金额：</th>
                        <td class="total"><span class="num">{{ goods.goodsDetail.sellingPrice }}.00</span>元
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" style="height: 250px;" title="地址修改">
    <el-input v-model="address" style="height: 50px;" autocomplete="off" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="editAddress(address)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import '../../assets/mall/styles/personal.css'
import '../../assets/mall/styles/addresses.css'
import '../../assets/mall/styles/my-orders.css'
import '../../assets/mall/styles/order-detail.css'
import '../../assets/mall/css/common.css'
import Store from '../../stores/Store.js'
import axios from 'axios'
export default {
  data() {
    return {
      dialogTableVisible: false,
      goods: Store(),
      address: '',
      orderId: 0
    }
  },
  methods: {
    logout() {
      this.user.token = 0
      this.user.cartNumber = 0
      /* 导航守卫 退出设置为false */
      sessionStorage.setItem("isLogin", false);
      this.$router.push('/login')
    },
    show() {
      this.dialogTableVisible = true

    },
    editAddress(address) {
      if (address.length > 8) {
        this.dialogTableVisible = false
        this.goods.userInfo.address = address
        console.log(address);
      } else {
        this.$message.error('地址错误!')
      }

    },
    submitOrder() {
      axios.post('http://localhost:8080/order/createOrder', {
        "userId": this.goods.userInfo.userId,
        "totalPrice": this.goods.goodsDetail.sellingPrice,
        "userAddress": this.goods.userInfo.address
      }).then(resp => {
        this.$router.push({
          path: '/mall/pay2',
          query: {
            orderNo: resp.data.orderNo
          }
        })
        this.orderId = resp.data.orderId

        /* 往OrderItem添加相关商品 */
        axios.post('http://localhost:8080/order/createOrderItem', {
          "orderId": this.orderId,
          "goodsId": this.goods.goodsDetail.goodsId,
          "goodsName": this.goods.goodsDetail.goodsName,
          "goodsCoverImg": this.goods.goodsDetail.goodsCoverImg,
          "sellingPrice": this.goods.goodsDetail.sellingPrice,
          "goodsCount": 1
        }).then(resp => {
        })

      })

    }
  },

}
</script>

<style scoped></style>